import React, { useState, useEffect } from 'react'
import { Input, Button, Modal, message } from 'antd';
import './index.css'
import wyyicon from '../../static/images/wyyicon.png'
import requestApi from '../../config/requestApi'
import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom'
import Qs from 'qs'


const { Search } = Input;
function Home() {
    const [isModalVisible, setIsModalVisible] = useState(false),
          [inputPhoneNumber, setInputPhoneNumber] = useState(''),
          [password, setPassword] = useState(''),
          [yanZhangMa, setYanZhengMa] = useState(''),
          [onClickAfter, setOnClickAfter] = useState(true), //设置一个变量用来判断我点击以后还是点击以前进行按钮的切换
          [daoJiShi, setDaoJiShi] = useState(60),        //设置倒计时
          [isLogin, setIsLogin] = useState(false),                 //用来判断是否登录
          [touxiang, setTouxiang] = useState(''),
          [niCheng, setNiCheng] = useState('');

    let   [whereDiv, setWhereDiv] = useState(0);
    let timestamp = new Date().getTime();     
    const location = useLocation();
    const navigate = useNavigate();
    const onSearch = value => console.log(value);
    const showModal = () => {
        setIsModalVisible(true);
    };
    //点击登录向后端提交数据
    const handleOk = () => {
        console.log(inputPhoneNumber);
        
        //生成时间戳
        timestamp = new Date().getTime()
        let params = {phone:inputPhoneNumber,password,timestamp}
        params = Qs.stringify({...params});
        console.log(params);
        
        requestApi('post', '/login/cellphone', params).then(
            res => {
                console.log(res);
                if(res.data.code === 200 ) {
                    message.success('登录成功');
                    setIsLogin(true);
                    setTouxiang(res.data.profile.avatarUrl);
                    setNiCheng(res.data.profile.nickname);
                    window.localStorage.setItem("token",res.data.token);
                }else {
                    message.error('登录失败');
                }
                
            }
        ).catch(
            err => {
                console.log(err);  
            }
        )
        
        setIsModalVisible(false);
      };
    
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //获取输入的手机号
    const getInputPhoneNumber = (event) => {
        setInputPhoneNumber(event.target.value);
        console.log(event.target.value);
        
    }
    //获取密码
    const getPassword = (event) => {
        setPassword(event.target.value)
    }
    //获取验证码
    const getYanZhengMa = (event) => {
        setYanZhengMa(event.target.value);
        console.log(event.target.value);
    }
    //点击获取验证码按钮以后触发的操作
    const onClickAfterAction = () => {
        setOnClickAfter(false);
        setDaoJiShi(60);
        const biaoJi = setInterval(() => {
        setDaoJiShi((daoJiShi) => {
            if(daoJiShi === 0){
                clearInterval(biaoJi);
                setOnClickAfter(true);
                return; 
            }
            return daoJiShi-1;
        });   
        }
        ,1000)
    }
    //发现音乐
    const djFindMusic = () => {
        // navigate('/findMusic');
        setWhereDiv(1);
    }
    //我的音乐
    const djMyMusic = () => {
        // navigate('/myMusic');
        setWhereDiv(2);
    }
    //关注
    const djGuanZhu = () => {
        // navigate('/guanZhu');
        setWhereDiv(3);
    }
    
    // useEffect(() => {
    //     if(daoJiShi === 58) {
    //         console.log('jinru');
            
    //         clearInterval(biaoJi);
    //     }

    // },[daoJiShi])


    return (
        <React.Fragment>
            <div style={{display:'flex'}} className='header'>
                <div><img src={wyyicon} alt=''/>网易云音乐</div>
                <div className='headerBox' style={{backgroundColor:whereDiv === 1 ? '#333333' : ''}}><Link to='/findMusic' style={{color:"white"}}  onClick={djFindMusic}>发现音乐</Link></div>
                <div className='headerBox' style={{backgroundColor: whereDiv === 2 ? '#333333' : ''}} ><Link to='/myMusic' style={{color:"white"}}  onClick={djMyMusic}>我的音乐</Link></div>
                <div className='headerBox' style={{backgroundColor: whereDiv === 3 ? '#333333' : ''}} ><Link to='/guanZhu' style={{color:"white"}}  onClick={djGuanZhu}>关注</Link></div>
                {/* <div className='headerBox' style={{backgroundColor:whereDiv === 1 ? '#333333' : ''}} onClick={djFindMusic}>发现音乐</div>
                <div className='headerBox' style={{backgroundColor: whereDiv === 2 ? '#333333' : ''}} onClick={djMyMusic}>我的音乐</div>
                <div className='headerBox' style={{backgroundColor: whereDiv === 3 ? '#333333' : ''}} onClick={djGuanZhu}>关注</div> */}
                <div>
                    <Search placeholder="音乐/视频/电台/用户" onSearch={onSearch} style={{ width: 200, marginTop: '10px' }} />
                </div>
                <div>
                    {isLogin ?
                        <React.Fragment>
                            <img src={touxiang} alt=''/>
                            <span>{niCheng}</span>
                        </React.Fragment> :  <Button type="primary" onClick={showModal}>
                         登录
                         </Button>}
                   
                    <Modal title="手机号登录" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText='登录' cancelText='取消'>
                        <div>
                          <span>手机号:</span><Input addonBefore="+86"  defaultValue={inputPhoneNumber} onChange={()=>{setInputPhoneNumber(inputPhoneNumber)}} placeholder="请输入手机号" style={{width: 310}} onBlur={getInputPhoneNumber}/>
                        </div>
                        <div style={{marginTop:10}}>
                           <span style={{marginRight:15}}>密码:</span><Input.Password  defaultValue={password} onChange={()=>{setPassword(password)}} placeholder="请输入密码" style={{width: 310}} onBlur={getPassword}/>
                        </div>
                        <Input placeholder="请输入验证码"  style={{width: 200,marginTop:10,marginRight:8}}  onBlur={getYanZhengMa} />
                        {onClickAfter ? <Button onClick={onClickAfterAction}>获取验证码</Button> : <Button disabled>{daoJiShi}秒后失效</Button>}
                    </Modal>
                </div>
            </div>
            <Outlet></Outlet>       
        </React.Fragment>
    )
}

export default Home
